/**
 * insertAdjacentHTML()方法接收两个参数:插入的位置和要插入的HTML文本。将结果节点插入到 DOM 树中的指定位置处
 * 第一个参数必须是下列值之一，且这些值都必须是小写形式:
 *  "beforebegin",在当前元素之前插入一个紧邻的同辈元素
 *  "afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素
 *  "beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素
 *  "afterend",在当前元素之后插入一个紧邻的同辈元素
 *  第二个参数是一个HTML字符串，如果浏览器无法解析字符串，就会抛出错误
 **/
var box = document.getElementById('box');
box.insertAdjacentHTML('beforebegin', '<p>我是新的前兄弟元素</p>');
box.insertAdjacentHTML('afterbegin', '<p>我是新的前子元素</p>');
box.insertAdjacentHTML('beforeend', '<p>我是新的后子元素</p>');
box.insertAdjacentHTML('afterend', '<p>我是新的后兄弟元素</p>');

